
import { useState, useMemo, useRef, useEffect } from 'react';
import { Input, Select, Radio, message } from 'antd';
import classNames from "classnames";
import styles from './index.module.less';

const { Option }  = Select;

const fieldsArr = ['#goodsUniqueCode#', '#shopOrderNumber#'];

const BarCodeTool = ({ handleChange, ...obj}) => {
  const { type, id, value: initValue, codeType: initType = "128M", narrow: initRate = 1 } = obj;

  const [radioValue, setRadio] = useState(()=>{
   return fieldsArr.includes(initValue) ? initValue : 'specInput';
  })
  const [inputValue, setInputValue] = useState(()=>{
    return fieldsArr.includes(initValue) ? '12345678' : initValue;
   })
  const [codeType, setCodeType] = useState(initType);
  const [rate, setRate] = useState(initRate);

  const inputEl = useRef(null);

  const showText = useMemo(()=>{
    return (codeType == '128M' ? 1 : 3);
  }, [codeType])

  useEffect(() => {
    setCodeType(initType);
    setRate(initRate);
    setInputValue(fieldsArr.includes(initValue) ? '12345678' : initValue);
    setRadio(fieldsArr.includes(initValue) ? initValue : 'specInput');
  }, [obj])

  //改变字段
  const handleChangeRadio = (val) => {
    setRadio(val);
    setInputValue('12345678');

    if(val == 'specInput'){
      inputEl.current.focus();
      handleChange({
        ...obj,
        value: '12345678'
      })
    }else{
      handleChange({
        ...obj,
        value: val
      })
    }
  }

  //改变输入
  const handleChangeInput = (value) => {
    if(!value || /^[^\u4e00-\u9fa5]+$/.test(value)){
      setInputValue(value);
      handleChange({
        ...obj,
        value
      })
    }else{
      message.error('中文不能生成条码！');
    }
  }

  const handleBlur = (val) => {
    let value = val?.replace(/ /g, '');
    if(!value){
      value = '12345678';
    }
    handleChangeInput(value);
  }

  //改变编码
  const handleChangeType = (val) => {
    //同步页面
    setCodeType(val);
    setRate(1);
    //回调覆盖对象
    handleChange({
      ...obj,
      codeType: val,
      controlCode: val == '128M' ? '!105' : undefined,
      narrow: 1,
			wide: 1 * (val == '128M' ? 1 : 3),
    })
  }

  //改变比例
  const handleChangeRate = (val) => {
    //同步页面
    setRate(val);
    //回调覆盖对象
    handleChange({
      ...obj,
      narrow: val,
			wide: val * (codeType == '128M' ? 1 : 3),
    })
  }

  const commonStyle = {
    display: "flex",
    gap: 8,
  }

  return (
    <div className={classNames(styles.operaWrapLeft,  type == 'uniqueCode' ? styles.operaWrap5 : '')}>
      {
        type != 'uniqueCode' && (<div style={commonStyle}>
          <div className="left">条形码信息:</div>
          <div className="right">
            <Radio.Group value={radioValue} onChange={(e)=>handleChangeRadio(e.target.value, id)}>
              <Radio value='specInput'><Input ref={inputEl} value={inputValue} disabled={fieldsArr.includes(radioValue)} onChange={e=>handleChangeInput(e.target.value)} onBlur={e=>handleBlur(e.target.value)}/></Radio><br />
              <Radio value='#goodsUniqueCode#'>商品唯一码</Radio><br />
              <Radio value='#shopOrderNumber#'>店铺订单号</Radio><br />
            </Radio.Group>
          </div>
        </div>)
      }
     
      <div style={{ marginTop: 8, ...commonStyle }}>
        <div className="left">条形码格式:</div>
        <div className="right">
          <Select onChange={val=>handleChangeType(val)} value={codeType} style={{width:'120px'}}>
            <Option value='128M'>Code128M</Option>
            <Option value='93'>Code93</Option>
          </Select>
        </div>
      </div>
      <div style={{ marginTop: 8, ...commonStyle }}>
        <div className="left">条形码宽高:</div>
        <div className="right">
          <Select onChange={val=>handleChangeRate(val)} value={rate} style={{width:'120px'}}>
            <Option value={1}>1:{1 * showText}</Option>
            <Option value={2}>2:{2 * showText}</Option>
            <Option value={3}>3:{3 * showText}</Option>
          </Select>
        </div>
      </div>
    </div>
  )
}

export default BarCodeTool;